<template>
    <div class="workflow-preview">
        <!-- 预览头部 -->
        <div class="preview-header">
            <h3>{{ workflow.name }}</h3>
            <p class="description">{{ workflow.description }}</p>
            <div class="tags">
                <el-tag 
                    v-for="tag in workflow.tags" 
                    :key="tag"
                    size="small"
                    class="tag"
                >
                    {{ tag }}
                </el-tag>
            </div>
        </div>

        <!-- 参数配置区 -->
        <div class="params-section">
            <component
                v-for="param in sortedParams"
                :key="param.nodeId"
                :is="createWorkflowComponent(param.type)"
                v-bind="param"
                :value="paramValues[param.nodeId]"
                @update:value="updateParamValue(param.nodeId, $event)"
            />
        </div>

        <!-- 预览操作区 -->
        <div class="preview-actions">
            <el-button-group>
                <el-button 
                    type="primary" 
                    :loading="generating"
                    @click="handleGenerate"
                >
                    生成图片
                </el-button>
                <el-button 
                    :disabled="generating"
                    @click="handleReset"
                >
                    重置参数
                </el-button>
            </el-button-group>
        </div>

        <!-- 预览结果区 -->
        <div class="preview-result" v-if="previewUrl">
            <el-image 
                :src="previewUrl" 
                fit="contain"
                :preview-src-list="[previewUrl]"
            >
                <template #placeholder>
                    <div class="image-placeholder">
                        <el-icon><Picture /></el-icon>
                        <span>图片生成中...</span>
                    </div>
                </template>
                <template #error>
                    <div class="image-error">
                        <el-icon><Warning /></el-icon>
                        <span>图片加载失败</span>
                    </div>
                </template>
            </el-image>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { Picture, Warning } from '@element-plus/icons-vue';
import type { WorkflowTemplate, WorkflowParam } from '@/types';
import { createWorkflowComponent } from './components';
import { workflowApi } from '@/api/workflow';

const props = defineProps<{
    workflow: WorkflowTemplate;
}>();

// 参数值状态
const paramValues = ref<Record<string, any>>({});
const generating = ref(false);
const previewUrl = ref('');

// 按顺序排序的参数列表
const sortedParams = computed(() => {
    return [...(props.workflow.params || [])].sort((a, b) => 
        (a.order || 0) - (b.order || 0)
    );
});

// 初始化默认参数值
const initDefaultValues = () => {
    props.workflow.params?.forEach(param => {
        if (param.defaultValue !== undefined) {
            paramValues.value[param.nodeId] = param.defaultValue;
        }
    });
};

// 更新参数值
const updateParamValue = (nodeId: string, value: any) => {
    paramValues.value[nodeId] = value;
};

// 生成图片
const handleGenerate = async () => {
    try {
        generating.value = true;
        
        // 验证必填参数
        const missingParams = props.workflow.params?.filter(param => 
            param.required && !paramValues.value[param.nodeId]
        );
        
        if (missingParams?.length) {
            ElMessage.error(`请填写必填参数: ${missingParams.map(p => p.label).join(', ')}`);
            return;
        }

        // 调用生成API
        const { data } = await workflowApi.executeWorkflow(props.workflow.id!, {
            params: paramValues.value
        });

        // 更新预览图
        previewUrl.value = data.imageUrl;
        
        ElMessage.success('生成成功');
    } catch (error) {
        console.error('Generate error:', error);
        ElMessage.error('生成失败，请重试');
    } finally {
        generating.value = false;
    }
};

// 重置参数
const handleReset = () => {
    initDefaultValues();
    previewUrl.value = '';
};

// 初始化
initDefaultValues();
</script>

<style lang="scss" scoped>
.workflow-preview {
    padding: 20px;

    .preview-header {
        margin-bottom: 30px;
        text-align: center;

        h3 {
            margin: 0 0 10px;
            font-size: 24px;
        }

        .description {
            color: #606266;
            margin: 0 0 15px;
        }

        .tags {
            .tag {
                margin: 0 5px;
            }
        }
    }

    .params-section {
        max-width: 600px;
        margin: 0 auto 30px;
    }

    .preview-actions {
        text-align: center;
        margin-bottom: 30px;
    }

    .preview-result {
        max-width: 800px;
        margin: 0 auto;

        .el-image {
            width: 100%;
            min-height: 400px;
            background: #f5f7fa;
            border-radius: 4px;
        }

        .image-placeholder,
        .image-error {
            height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #909399;

            .el-icon {
                font-size: 48px;
                margin-bottom: 10px;
            }
        }
    }
}
</style> 